<template>
  <Card class="index-page"
        :bordered="false"
        dis-hover>
    <p slot="title">快捷方式</p>
    <Row :gutter="16">
      <Col span="4">
      <router-link to="/system_manage/user_manage">
        <div class="single-menu-icon color-ffc324">
          <div class="menu-icon">
            <Icon class="icon"
                  type="ios-contact" />
          </div>
          <p>用户管理</p>
        </div>
      </router-link>
      </Col>
      <Col span="4">
      <router-link to="/system_manage/role_manage">
        <div class="single-menu-icon color-32db9a">
          <div class="menu-icon">
            <Icon class="icon"
                  type="md-outlet" />
          </div>
          <p>角色管理</p>
        </div>
      </router-link>
      </Col>
      <Col span="4">
      <router-link to="/news/news_center">
        <div class="single-menu-icon color-86a9f9">
          <div class="menu-icon">
            <Icon class="icon"
                  type="md-notifications" />
          </div>
          <p>消息中心</p>
        </div>
      </router-link>
      </Col>
      <Col span="4">
      <router-link to="/feedback/feedback_index">
        <div class="single-menu-icon color-7ad02c">
          <div class="menu-icon">
            <Icon class="icon"
                  type="ios-paper" />
          </div>
          <p>意见反馈</p>
        </div>
      </router-link>
      </Col>
    </Row>
  </Card>
</template>

<script>
export default {
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.index-page {
  height: 85vh;
  background-color: #fff;
  .single-menu-icon {
    margin: 0 auto;
    width: 100px;
    text-align: center;
    cursor: pointer;
    .menu-icon {
      padding: 30px 0;
      width: 100px;
      height: 100px;
      border-radius: 6px;
      .icon {
        font-size: 30px;
        color: #fff;
      }
    }
    p {
      margin-top: 10px;
      width: 100px;
      font-weight: 600;
      color: #333;
      text-align: center;
    }
  }
  .color-ffc324 {
    .menu-icon {
      background-color: #ffc324;
    }
  }
  .color-32db9a {
    .menu-icon {
      background-color: #32db9a;
    }
  }
  .color-86a9f9 {
    .menu-icon {
      background-color: #86a9f9;
    }
  }
  .color-7ad02c {
    .menu-icon {
      background-color: #7ad02c;
    }
  }
}
</style>
